<extend name="Common:base" />
<block name="head">
  <style>
    /* .el-table__body tr.current-row>td{
      background: rgba(157, 195, 232, 0.7);
    } */
    .container > .wrapp > .el-row {
      margin-bottom: 6px;
    }
  </style>
</block>
<block name="body">
	<div id="app" class="container">
		<div class="wrapp" v-show="show" style="display: none">
			<!-- seach form -->
			<el-row>
				<el-col>
					<el-form :inline="true"  ref="searchForm" :model="searchForm">
					  <el-form-item style="display: none;" prop="id">
					  	<el-input  v-model="searchForm.id">
					   </el-input>
					  </el-form-item>
					  
					  <el-form-item prop="name" >
					    <el-input size="small" placeholder="请输入单位名"  v-model="searchForm.name">
					    </el-input>
					  </el-form-item>

					  <el-form-item prop="contact" >
					    <el-input size="small" placeholder="请输入联系人"  v-model="searchForm.contact">
					    </el-input>

					  </el-form-item>
					  <el-form-item prop="tel" >
					    <el-input size="small" placeholder="联系人电话"  v-model="searchForm.tel">
					    </el-input>
					  </el-form-item>

            <el-form-item prop="type">
              <el-dropdown trigger="click" menu-align="start" @command="depTypeChange">
                <el-button type="primary" size="small">
                  {{depTypeName}}<i class="el-icon-caret-bottom el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(key,index) in typeList" :command="index.toString()">{{key}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>

					  <el-form-item>
					    <el-button size="small" type="primary" icon="search" @click="loadDatalist" >查询</el-button> 
					    <el-tooltip content="清空搜索框并刷新表格数据" placement="bottom-start">
					      <el-button size="small" @click="resetBack" style="margin-left:10px;">重置</el-button>
              </el-tooltip>
			        	<!-- <el-button  @click="openDialog('advancedSearch')" icon="search">高级查询</el-button>  -->
					  </el-form-item>
            <el-form-item>
              <el-tooltip content="点击刷新当前页面" placement="right">
                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
              </el-tooltip>
            </el-form-item>
					</el-form>
				</el-col>
				<el-col :span="12">
				</el-col>	
			</el-row>
			<!-- / search form -->

			<!-- datatables  -->
			<el-row>
				<el-col :span="24">
					<el-table 
					:data="dataList" 
					border    
					highlight-current-row
					v-loading="dataLoad"
					element-loading-text="{:L('DATA_LOGIN')}"
                   
                    @cell-click="showRemark"
                    @row-click="handleSelectionChange" >

					    
					    <el-table-column label="序号"  align="center" width="65" :formatter="handleIndex"  >
					    </el-table-column>
					    <!-- <el-table-column label="单位ID" align="center" prop="id" width="90">
					    </el-table-column> -->
					    <el-table-column   label="单位名"  prop="name" width="180" align="center">
					    </el-table-column>
					    <el-table-column label="类型" align="center" prop="typeText" >
					    </el-table-column>
						<!-- <el-table-column label="事业/财富区" align="center" prop="p_name" width="110">
					    </el-table-column>
					    <el-table-column label="片区" align="center" prop="zone">
					    </el-table-column> -->
					    <el-table-column label="联系人"  prop="contact" align="center">
					    </el-table-column>
					    <el-table-column label="联系电话" align="center" prop="tel" width="140">
					    </el-table-column>
					    <!-- <el-table-column label="拓展一" align="center" prop="expand1">
					    </el-table-column>
					    <el-table-column  label="拓展二" align="center" prop="expand2">
					    </el-table-column> -->
						<!--<el-table-column label="是否启用" :context="_self" align="center" prop="status">
					      <template scope="scope">
  							<div>
  						        <el-switch
  								  v-model="scope.row.switch"
  								  on-color="#13ce66"
  								  off-color="#ff4949" 
  								  @change="switchHandle(scope.$index, scope.row)">
  								</el-switch>
  							</div>
                         </template>
					    </el-table-column>-->
              <el-table-column label="地址" header-align="center" prop="address" width="180">
              </el-table-column>
              <el-table-column label="备注(点击查看)" align="center" prop="remark" width="200">
                <template scope="scope">
                  {{scope.row.remark | limitRemark}}
                </template>
              </el-table-column>
              <!--{$viewDecorator['oprate']}-->
					    
				    </el-table>
				</el-col>
			</el-row>
			<!-- / datatables  -->
            

			<!-- toolbar -->
			<el-row type="type"  justify="space-between" align="middle"  class="row-bg">
			  <!--<el-col :span="12">
			  <div class="grid-content bg-purple">
			  	<span class="wrapper">

                    {$viewDecorator['button']}
			  		
				</span>
			  </div>
			  </el-col>-->
			  <el-col :span="24">
				  <div class="grid-content bg-purple-light pull-right">
				    <!-- page -->
				    <include file="Common:_pagination" />
				    <!-- / page -->
				  </div>
			  </el-col>
			</el-row>
			<!-- / toolbar -->

		</div>
	</div>
</block>
<block name="scripts">
<script>
	Vue.filter("limitRemark",function(v){
	  if (v!=null && v.length > 6) {
	  	var length = (arguments[1] || 6);
	  	return v.substring(0,length)+'......';  
	  } else {
	  	return v;
	  }
	})
</script>
<script>

    
    page.getUsersUrl = "{:U('getUsers')}";
    page.sethrsUrl   = "{:U('setHr')}";
    page.gethrsUrl   = "{:U('getSnUHrs')}";
    page.delhrUrl    = "{:U('delHrFromDepartment')}";


	window.defaultOption.setDatas({
		remarkContentDialog:false,
		remarkContent:"",
		depTypeName:"选择单位类型",
    //传输照片上传地址
    pathInfo:{folder:'department'},
		//放大图片
    bigimg:false,
    //放大图片地址
    imageUrl:'',
    topO:[],
    //状态值
    statusForm:{
       id:0,
       status:'1',
    },
    //负责主管
    users:[],

    fileList:[
       {name: '', url: ''}
		],
		rules:{
      name:[
        { required: true, message: '请填写单位名称', trigger: 'blur' },
      ],
      type:[
        { required: true, message: '请选择类型', trigger: 'blur' ,type: 'number'},
        // { validator: checkType, message: '请选择类型', trigger: 'blur' },
      ],

		},
		typeList:{:json_encode($typeList)},
		zoneList:{:json_encode($zoneList)},
    topO:{:json_encode($divisions)},
		computedusers:[],
    hr:[],
    dehrs:[],
    multipleSelection: []
	}).setForm('add', {
		id:'',
		name:"",
		// public:"",
		type:"",
        division_id:"",
		zone_id:"",
		expand1:"",
		expand2:"",
		user_id:"",
        hr_id:"",
		f_num:"",
		address:"",
		remark:"",
		img:"",
		zone:"",
		status:1,
	}).setForm('edit', {
		id:"",
		name:"",
		public:"",
		type:"",
    division_id:"",
		zone_id:"",
		expand1:"",
		expand2:"",
		user_id:"",
    hr_id:"",
		f_num:"",
		address:"",
		remark:"",
		img:"",
		//status:0,
	}).setForm('search', {
		name:"",
		id:"0",
		sortFiled:"id",
		sortWay:"asc", // desc
		contact:"",
		tel:"",
		type:""
	}).setForm('hr',{
    id:null,
    user_ids:[]
  },true).setMethod('resetBack',function(){
    window.location.href="{:U('index')}";
  }).setMethod("handleEdit", function(index, row){
		//将此行数据赋给editForm
		var type='edit';
		row['public']=row['public'] == "是"?"1":"0";
		this.initObject(this[FormName.getFormName(type)] , row); 

		// this.fileList = [{name:row.img, url: this.imgUrl(row.img)}];
		this.editIndex = index;
		this.openDialog(type);

	}).setMethod('organization', function(){

	    /*var vmThis = this;
	    this.$http.get("{:U('getDivision')}").then(function(response){
	    	vmThis.topO = response.body;
	    })
        this.getUsers(0);*/
	}).setMethod('beforeList',function(dataList){
		var vmThis = this;
		dataList.forEach(function(currentValue, index){
            currentValue['type']     = parseInt(currentValue['type']);
			currentValue['typeText'] = vmThis.typeList[currentValue['type']];
			// currentValue['zone']     = vmThis.zoneList[currentValue['zone_id']];
  		    currentValue['switch']   = currentValue.status==1?true:false;
            currentValue.status = parseInt(currentValue.status);
		})
		return dataList;

	}).setMethod('checkDown', function(v){
		this[FormName.getFormName('search')].id = v;
		this.dataReload();
	}).setMethod('editOpen', function(v){
		var vmThis = this;
	    /*this.$http.get("{:U('getDivision')}").then(function(response){
	    	vmThis.topO = response.body;
	    });*/
		// this.computedusers = this.userList;
        this.getUsers(this.dataList[this.editIndex].type,  this.dataList[this.editIndex].user_id);
	}).setMethod('switchHandle',function(index,row){
	    row.status=row.switch?'1':'0';
	    this.initObject(this.statusForm, row);
	    this.statusIndex=index;
	    var vmThis =this;
	    this.$http.post(page.editFormUrl,this.statusForm).then(function(response){
	    	
	    }).catch(function(response){
	    	vmThis.$message({
	    		message:'状态更改失败',
	    		type:'error'
	    	});
	    	vmThis.dataList[vmThis.statusIndex].switch = !vmThis.dataList[vmThis.statusIndex].switch;
	    });
    }).setMethod('getUsers', function(type,id){
        /**
        * 获取备选的主管
        */
        if (!id) {
            id = 0;
        }

        if (!type) {
            type = 0;
        }
        this.$http.get(page.getUsersUrl, {params:{id:id, type:type}}).then(function(response){
            this.computedusers = response.body;
            console.log(this.computedusers);
        }, function(response){
            vmThis.$message({
                message:'获取失败',
                type:'error'
            });  
        });

    }).setMethod('outPut', function(id){
        window.location.href="{:U('outPutExecle')}?id=" + id;
    }).setMethod('typeChange', function(v){
        this.getUsers(v,0)
    }).setMethod('hrBeforeOpen', function(){
        
        if (!this.isSingle()) {
            this.hrFormDialog = false;
            return;
        }

        var id =this.multipleSelection[0].id;
        this.hrForm.id = id;
        this.$http.get(page.gethrsUrl, {params:{id:id}}).then(function(response){
            this.hr = response.body.hrs;
            this.dehrs = response.body.bhr;
        }, function(response){

        })

    }).setMethod('isSingle', function(){
        if (this.multipleSelection.length !=1) {
            this.$message.error('请勾选一个');
            return false;
        } else {
            return true;
        }
    }).setMethod('handleSelectionChange', function(val){
        
        this.deleteArrAllItem('multipleSelection');
        this.multipleSelection.push(val) ;

    }).setMethod('tagClose', function(arg){
        var i = this.dehrs.indexOf(arg);
        this.hr.splice(i+1,1);
        this.$http.post(page.delhrUrl, {user_id:arg.user_id}).then(function(response){
            // this.$message.succe
        }, function(response){
            this.$message.error('出错了');
        });
    }).setMethod('depTypeChange',function(v){
    	this.searchForm.type=v;
    	this.depTypeName = this.typeList[v];

    }).setMethod('showRemark',function(row, column, cell, event){
        if (column.property=='remark') {
            this.remarkContent = row.remark;
            this.remarkContentDialog = true;
        }
    	
    });
</script>

	
</block>
